<template>
	<view class="instrument">
		      <!-- <view class="things"> -->
		        <u-waterfall v-model="flowList" ref="uWaterfall1">
		          <template v-slot:left="{leftList}">
		            <view class="demo-warter" v-for="(item, index) in leftList" :key="index" @click="toDetail(item.id)">
		              <!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
		              <u-lazy-load threshold="0" border-radius="10" :image="item.images[0].url" :index="index" class="picture"></u-lazy-load>
		              <view class="demo-title">
		                {{item.title}}
		              </view>
		              <view class="demo-price">
		                <view class="pic">
		                  <image class="point-tag" src="/static/images/logo.png"></image>
		                </view>
		                <view class="price"> {{item.score}}积分</view>
		              </view>
		            </view>
		          </template>
		          <template v-slot:right="{rightList}">
		            <view class="demo-warter" v-for="(item, index) in rightList" :key="index" @click="toDetail(item.id)">
		              <u-lazy-load threshold="0" border-radius="10" :image="item.images[0].url" :index="index" class="picture"></u-lazy-load>
		              <view class="demo-title">
		                {{item.title}}
		              </view>
		              <view class="demo-price">
		                <view class="pic">
		                  <image class="point-tag" src="/static/images/logo.png"></image>
		                </view>
		                <view class="price"> {{item.score}}积分</view>
		              </view>
		            </view>
		          </template>
		        </u-waterfall>
		        <!-- <u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="onReachBottom"></u-loadmore> -->
		      <!-- </view> -->
	</view>
</template>

<script>
	export default {
		name: "x-instrument",
		data() {
			return {
				flowList: [
					{
						title: '名字',
						score:'2323',
						images:['http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg']
					},
					{
						title: '名字',
						score:'2323',
						images:['http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg']
					}
				]
			};
		}
	}
</script>

<style lang="scss" scoped>
	.instrument {
		.demo-warter {
		  border-radius: 8px;
		  margin: 5px;
		  background-color: #ffffff;
		  padding: 8px;
		  position: relative;
		  .picture {
		    width: 315rpx;
		    height: 315rpx;
		  }
		}
		
		.u-close {
		  position: absolute;
		  top: 32rpx;
		  right: 32rpx;
		}
		
		.demo-image {
		  width: 100%;
		  border-radius: 4px;
		}
		
		.demo-title {
		  font-size: 30rpx;
		  margin-top: 5px;
		}
		
		.demo-tag {
		  display: flex;
		  margin-top: 5px;
		}
		
		.demo-tag-owner {
		  color: #ffffff;
		  display: flex;
		  align-items: center;
		  padding: 4rpx 14rpx;
		  border-radius: 50rpx;
		  font-size: 20rpx;
		  line-height: 1;
		}
		
		.demo-tag-text {
		  border: 1px solid #fff;
		  margin-left: 10px;
		  border-radius: 50rpx;
		  line-height: 1;
		  padding: 4rpx 14rpx;
		  display: flex;
		  align-items: center;
		  border-radius: 50rpx;
		  font-size: 20rpx;
		}
		
		.demo-price {
		  font-size: 32rpx;
		  font-family: PingFang SC-Bold, PingFang SC;
		  font-weight: bold;
		  color: #ed5317;
		  height: 44rpx;
		  line-height: 44rpx;
		  padding-top: 16rpx;
		  .pic {
		    float: left;
		    .point-tag {
		      width: 40rpx;
		      height: 40rpx;
		    }
		  }
		  .price {
		    float: left;
		    padding-left: 15rpx;
		  }
		}
		
		.demo-shop {
		  font-size: 22rpx;
		  margin-top: 5px;
		}
		.on-things {
		  margin-top: 100rpx;
		  font-size: 34rpx;
		  font-family: PingFang SC-Bold, PingFang SC;
		  font-weight: 600;
		  color: #333333;
		  text-align: center;
		}
	}
</style>